<template>
    <div id="category">
        <search></search>
        <van-tree-select
                :items="items"
                :main-active-index.sync="activeIndex"
                height='calc(100vh - 104px)'
                @click-nav='changeRight'>
            <template slot="content">
                <div class='imgbanner'>
                    <img width="100%" :src="bannerImg" alt="">
                </div>
                <van-grid :column-num="3">
                    <van-grid-item
                            v-for="(item,index) in subCategoryList"
                            :key="index"
                            :icon="item.wap_banner_url"
                            :text="item.name"
                            :to="'/categoryList/'+item.id">
                    </van-grid-item>
                </van-grid>
            </template>

        </van-tree-select>
        <tab-btn></tab-btn>
    </div>
</template>

<script>
    import tabBtn from "../components/tabBtn";
    import search from "../components/search";

    import {TreeSelect, Grid, GridItem} from 'vant'
    import axios from 'axios'

    export default {
        data() {
            return {
                searchData: "",
                //items: [{ text: '分组 1' }, { text: '分组 2' }],
                activeIndex: 0,
                subCategoryList: [],
                data: {},
                bannerImg: ''
            }
        },
        components: {
            tabBtn,
            search,
            [TreeSelect.name]: TreeSelect,
            [Grid.name]: Grid,
            [GridItem.name]: GridItem
        },
        async created() {
            let res = await axios.get(this.$root.api.CatalogList)
            let data = res.data;
            this.data = data.data;
            this.subCategoryList = this.data.currentCategory.subCategoryList
            this.bannerImg = this.data.currentCategory.img_url;
            console.log(data)
        },
        computed: {
            items: function () {
                //[{ text: '分组 1' }, { text: '分组 2' }],
                //console.log(this.data.categoryList)
                if (this.data.categoryList == undefined) {
                    return []
                } else {
                    console.log(123)
                    let arr = []
                    this.data.categoryList.forEach((item, index) => {
                        item.text = item.name
                        arr.push(item)
                    })
                    return arr;
                }
            }
        },
        methods: {
            changeRight: function (index) {
                //console.log(index)
                this.activeIndex = index;

            }
        },
        watch: {
            activeIndex: async function () {
                if (this.items.length !== 0) {
                    let id = this.items[this.activeIndex].id
                    console.log(id)
                    let res = await axios.get(this.$root.api.CatalogCurrent, {params: {id}})
                    //console.log(res)
                    this.subCategoryList = res.data.data.currentCategory.subCategoryList
                    this.bannerImg = this.items[this.activeIndex].img_url;
                    console.log(this.subCategoryList)
                } else {
                    this.subCategoryList = []
                }

            }
        }
    }
</script>

<style lang="less">
    #category {
        .imgbanner {
            width: 100%;
            box-sizing: border-box;
            padding: 10px;
        }
    }
</style>
